<template>
  <div>
    <basic-container-one>
      <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
      <el-form :inline="true"  >
        <div style="margin-top: 22px">
          <el-form-item>
            <el-date-picker
              v-model="time"
              clearable
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.projectId" @change="selectProject" clearable placeholder="游戏">
              <el-option
                v-for="item in gamelist"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.gameId"  clearable  placeholder="设备">
              <el-option
                v-for="item in gamePhonelist"
                :key="item.id"
                :label="item.gameName +'-'+ item.phoneName"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formInline.roleName" clearable placeholder="角色名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </basic-container-one>
    <basic-container>

    <el-row>
      <el-col :span="24">
        <template>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="account"
              label="玩家账号">
              <template slot-scope="scope">
                <span v-if="scope.row.phone!=''"><span
                  class="skucost-pruice">{{ scope.row.phone}}</span></span>
                <span v-else><span
                  class="skucost-pruice">{{ scope.row.account}}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="serverNum"
              label="区服号">
            </el-table-column>
            <el-table-column
              prop="serverName"
              label="区服名称">
            </el-table-column>
            <el-table-column
              prop="roleName"
              label="角色名">
            </el-table-column>
            <el-table-column
              prop="device"
              label="设备类型">
            </el-table-column>
            <el-table-column
              prop="phoneName"
              label="平台">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间">
            </el-table-column>
            <el-table-column
              prop="gameName"
              label="游戏">
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10,20, 50, 100, 200]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </el-col>
    </el-row>

  </basic-container>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {getRolePageList} from "@/api/system/details";
import {gameList, gamePhoneList} from "@/api/game/game";
import VueElementLoading from 'vue-element-loading'
import {cloneObj} from "@/util/util";
export default {
  name: "index",
  data() {
    return {
      time: null,
      loading: true,
      isActive: false,
      gamelist:[],
      gamePhonelist:[],
      formInline: {
        id:'',
        gameId:'',
        phone:'',
        roleName:'',
      },
      page: {
        currentPage: 1,
        pageSize: 20,
        total: '',
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      tableData: [],
    };

  },
  props: {
    userId: {
      type: Number,
      default: 0
    },
  },
  components: {
  VueElementLoading
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  // watch: {
  //   $route () {
  //     this.handleInit()
  //   }
  // },
  created() {
    this.formInline.id = this.userId;
    console.log("this.userId",this.userId)
    this.handleInit()
    this.phone()
    this.game()
  },
  methods: {

    selectProject(value){
      this.$set(this.formInline, 'gameId', '')
      this.formInline.projectId=value
      this.phone()

    },
    game(){
      gameList().then(res => {
        const data = res.data.data;
        console.log("res",res)
        this.gamelist = data;
      });
    },
    phone(){
      var forming={};
      forming = cloneObj(this.formInline)
      forming.id=''
      console.log("this.formInline.projectId",this.formInline.projectId)
      gamePhoneList(forming).then(res => {
        const data = res.data.data;
        this.gamePhonelist = data;
      });
    },

    handleInit(){

      this.onload()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.onSubmit();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      this.onSubmit();
    },
    isNotEmpty(arr) {
      return arr != null && arr.length !== 0
    },
    isEmpty(arr) {
      return !this.isNotEmpty(arr)
    },

    onSubmit() {

      var startTime = undefined;
      var endTime = undefined;
      console.log('this.time', this.time)
      if (this.isNotEmpty(this.time)) {
        startTime = this.time[0].getTime()
        endTime = this.time[1].getTime()
      }
      this.onload(startTime, endTime);
    },

    onload(startTime,endTime){
      this.isActive = true;
      getRolePageList(this.page.currentPage, this.page.pageSize, Object.assign(this.formInline), startTime,endTime).then(res => {
        this.isActive = false;
        const data = res.data.data;
        console.log("res.data.data", res.data.data)
        this.page.total = data.total;
        this.tableData = data.records;
        this.loading = false;
      });
    },
  },

}
</script>

<style scoped>

</style>
